<template>
	<!-- 智能园区 -->
	<view class="p-10">
		<u-sticky>
			<view class="bg-white p-5">
				<u-tabs class="top" lineColor="#2172FC" :current="currentKey" :list="[{name: '安防告警'},{name: '仓库物资'},{name: '人车通行'},{name: '信息发布'}]" lineWidth="50" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}"
					@change="selectChange"></u-tabs>
			</view>
		</u-sticky>
		<view class="p-10 m-t-10 bg-white">
			<template v-if="currentKey == 0">
				<u-collapse :value="showMoreKeys" ref="collapse">
					<u-collapse-item name="1" class="bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt">告警统计</text></view>
						</template>
						<view class="list-title">近30天AI识别告警统计 <view class="list-conten">88次</view>
						</view>
						<view class="charts-box">
							<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
						</view>
					</u-collapse-item>
					<u-collapse-item name="2" class="m-t-10">
						<template #title>
							<view class="content-item-title"><text class="title-txt">告警记录</text></view>
						</template>
						<view class="">
							<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
						</view>
						<view class="p-10 m-t-10" style="background: #F1F6FC;" v-for="(item,index) in list">
							<text>{{item.title}}</text>
							<view class="flex m-between m-t-5">
								<view class="flex">
									<u-icon name="map"></u-icon><text style="color: #555D6F; font-size: 24rpx;">{{item.type}}</text>
								</view>
								<text>{{item.time}}</text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</template>
			<template v-else-if="currentKey == 1">
				<view class="">
					<view class="flex">
						<view class="m-r-10" style="width: 200rpx;">
							<uni-data-select v-model="value" :localdata="[]" @change="change"></uni-data-select>
						</view>
						<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
					</view>
					<uni-table ref="table" emptyText="暂无更多数据">
						<uni-tr>
							<uni-th align="center" width="50">序号</uni-th>
							<uni-th align="center" width="50">名称</uni-th>
							<uni-th align="center" width="50">数量</uni-th>
							<uni-th align="center" width="50">单位</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td align="center"><u--text :text="item.id" size="12" align="center"></u--text></uni-td>
							<uni-td align="center"><u--text :text="item.name" size="12" bold="true" align="center"></u--text></uni-td>
							<uni-td align="center"><u--text :text="item.num" size="12" bold="true" align="center"></u--text></uni-td>
							<uni-td align="center"><u--text :text="item.unit" size="12" c bold="true" align="center"></u--text></uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</template>
			<template v-else-if="currentKey == 2">
				<view class="">
					<u-tabs lineColor="#2172FC" :current="currentKey1" :list="[{name: '人员'},{name: '车辆'}]" lineWidth="30" :activeStyle="{color: '#2172FC',fontWeight: 'bold'}" @change="selectChange1"></u-tabs>
					<view class="charts-box">
						<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
					</view>
				</view>
				<u-collapse :value="showMoreKeys" ref="collapse">
					<u-collapse-item name="1" class="bg-white">
						<template #title>
							<view class="content-item-title"><text class="title-txt">人员通行记录</text></view>
						</template>
						<view class="p-10 m-t-10" style="background: #F1F6FC;" v-for="(item,index) in list1">
							<view class="flex m-between">
								<view class="">
									<text class="m-r-10" style="font-size: 16px;">{{ item.title }}</text>
									<u-tag text="内部" size="mini" bgColor="#4481E5" shape="circle"></u-tag>
								</view>
								<text>{{item.time}}</text>
							</view>
							<view class="flex m-between m-t-5">
								<view class="flex">
									<u-icon name="map"></u-icon><text style="color: #555D6F; font-size: 24rpx;">{{item.type}}</text>
								</view>
								<text>出入类型: <text :style="{color: '#00B578'}">{{item.type}}</text></text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</template>
			<template v-else>
				<u-collapse :value="showMoreKeys" ref="collapse">
					<u-collapse-item name="1" class="m-t-10">
						<template #title>
							<view class="content-item-title"><text class="title-txt">信息列表</text></view>
						</template>
						<view class="">
							<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
						</view>
						<view class="p-10 m-t-10" style="background: #F1F6FC;" v-for="(item,index) in list2">
							<text>{{item.title}}</text>
							<view class="flex m-between m-t-5">
								<view class="flex">
									<u-icon name="man"></u-icon><text style="color: #555D6F; font-size: 24rpx;">{{item.type}}</text>
								</view>
								<text>{{item.time}}</text>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</template>
		</view>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2])
	let currentKey = ref(0),
		list = ref([{
			title: '人员未带安全帽',
			time: '2024-1-2',
			type: '南门'
		}, {
			title: '人员未带安全帽',
			time: '2024-1-2',
			type: '南门'
		}, {
			title: '人员未带安全帽',
			time: '2024-1-2',
			type: '南门'
		}]),
		list1 = ref([{
			title: '王勇',
			time: '2024-1-2',
			location: '南门',
			type: '出园'
		}, {
			title: '立项',
			time: '2024-1-2',
			location: '南门',
			type: '出园'
		}, {
			title: '周志勇',
			time: '2024-1-2',
			location: '南门',
			type: '出园'
		}]),
		list2 = ref([{
			title: '信息标题1',
			time: '2024-1-2',
			type: '王勇'
		}, {
			title: '信息标题2',
			time: '2024-1-2',
			type: '王勇'
		}, {
			title: '信息标题3',
			time: '2024-1-2',
			type: '王勇'
		}]),
		tableData = ref([{
			id: '1',
			name: '盘索绳',
			num: 45,
			unit: '个'
		}, {
			id: '2',
			name: '盘索绳',
			num: 45,
			unit: '个'
		}, {
			id: '3',
			name: '盘索绳',
			num: 45,
			unit: '个'
		}]),
		chartData = ref({}),
		chartData1 = ref({}),
		opts = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: true,
			enableScroll: false,
			legend: {
				show: false
			},
			title: {
				name: ''
			},
			subtitle: {
				name: ''
			},
			extra: {
				ring: {
					ringWidth: 20,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 15,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF"
				}
			}
		},
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [10, 15, 5, 15],
			enableScroll: false,
			dataLabel: false,
			legend: {
				show: true
			},
			xAxis: {
				disableGrid: true
			},
			yAxis: {
				gridType: "dash",
				dashLength: 2,
				showTitle: true,
				data: [{
					title: '人'
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: false,
					activeType: "hollow"
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res = {
				series: [{
					data: [{
						name: '安全帽识别',
						value: 56,
						labelText: '安全帽识别: 56'
					}, {
						name: '抽烟',
						value: 12,
						labelText: '抽烟: 56'
					}, {
						name: '电子围栏',
						value: 20,
						labelText: '电子围栏: 20'
					}]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const getServerData1 = () => {
		setTimeout(() => {
			let res = {
				categories: ["00:00", "06:00", "12:00", "18:00", "00:00"],
				series: [{
					name: "入园人数",
					data: [35, 8, 25, 37, 4]
				}, {
					name: "出园人数",
					data: [70, 40, 65, 100, 44]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res));
		}, 500);
	}
	const selectChange = ({
		index
	}) => {
		currentKey.value = index
	}
	getServerData()
	getServerData1()
</script>

<style lang="scss" scoped>
	.top {
		:deep(.uni-scroll-view-content uni-view) {
			flex-grow: 1;
		}
	}
</style>